<template>
  <Modal
    class="i-modal"
    v-bind="$attrs"
    v-on="$listeners"
    :mask-closable="maskClosable"
    :transfer="transfer"
    :width="width"
  >
    <slot>
    </slot>
    <div class="tip"><slot name='tip'></slot></div>
    <slot name="header" slot="header">
      <div v-if="title" class="props-title">
        <!-- <img src="~_img/backstage/kanban/content-title-decoration.png" alt /> -->
        {{ title }}
      </div>
    </slot>
    <slot name="footer" slot="footer">
      <Button class="btn-save" @click="handleConfirm">{{ okText }}</Button>
      <Button class="btn-reset" @click="handleCancel">
        {{ cancelText }}
      </Button>
    </slot>
    <slot name="close" slot="close"></slot>
  </Modal>
</template>

<script>
// import IviewButton from './IviewButton'
// @group iview
export default {
  name: 'IviewModal',
  components: {
    // IviewButton,
  },
  props: {
    // 寬度
    width: {
      type: String,
      default: 'auto', // 控件默認520px
    },
    // 设置默认不允许点击遮罩层关闭
    maskClosable: {
      type: Boolean,
      default: false,
    },
    // 设置loading为true，监听on-ok事件手动关闭弹窗，用于校验表单（iview默认会自动关闭弹窗）
    // loading: {
    //   type: Boolean,
    //   default: true
    // },
    // modal是否置于body标签里，设置false，否则设置样式无效
    transfer: {
      type: Boolean,
      default: false,
    },
    okText: {
      type: String,
      default: '确认',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    // 标题
    title: {
      type: String,
      default: '默认标题',
    },
  },
  data() {
    return {}
  },
  methods: {
    // 取消按钮
    handleCancel() {
      // 跟Iview原本的on-cancel不一样，需要手动关闭弹窗
      // this.$attrs.value = false;
      this.$emit('on-cancel')
    },
    // 确认按钮
    handleConfirm() {
      // 跟Iview原本的on-ok不一样，需要手动关闭弹窗
      this.$emit('on-ok')
    },
  },
}
</script>

<style lang="less">
.tip{
  font-size: 14px;
  margin-top: 35px;
  color: #bc7766;
}
/** 这里打开全局 */
@import './config/common';

@borderColor: #179d7d;
.btn-save {
  width: 80px;
  height: 30px;
  background: #85c989;
  box-shadow: 0px 2px 2px 0px #448247, 0px 0px 1px 0px #b4ffb9;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 1px 1px #163124, 0px 3px 5px #bcffca;
  margin-right: 30px;
  border: none;
}
.btn-reset {
  width: 80px;
  height: 30px;
  background: #ffffff;
  box-shadow: 0px 4px 4px 0px #baecbd, 0px 1px 5px 1px #e6ffe7;
  font-size: 14px;
  font-weight: bold;
  color: #66bc7a;
  line-height: 22px;
  text-shadow: 0px 3px 5px #bcffca;
  border: none;
}
.i-modal {
  .ivu-modal-mask{
    width: 100%;
    // left: inherit;
    // right: inherit;
  }
  .ivu-modal-wrap {
    // .flex-center;
    // left:inherit;
    // right:inherit;
    width: 100%;
    .ivu-modal {
      width: 560px;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 10px 10px 20px 0px rgba(53, 55, 74, 0.3), 0px 2px 4px 0px rgba(108, 172, 112, 0.8);
      border-radius: 6px;
      .ivu-modal-content {
        min-height: 200px;
        // box-shadow: 0px 3px 5px 0px rgba(133, 247, 220, 0.24), 0px 2px 40px 0px rgba(0, 0, 0, 0.5),
        //   1px -15px 31px 0px rgba(146, 248, 224, 0.12);
        // border-radius: 4px;
        border: 1px solid rgba(133, 247, 220, 0.05);
        background: #ffffff;
        display: flex;
        flex-direction: column;
        .ivu-modal-close {
          // .circle(24px);
          width: 16px;
          height: 16px;
          background: #bc7766;
          border-radius: 50%;
          top: 13px;
          right: 20px;
          // .flex-center;
          display: flex;
          justify-content: center;
          align-items: center;
          .ivu-icon-ios-close {
            // width: 14px;
            // height: 14px;
            color: #d3d6d9;
            font-size: 24px;
            font-weight: bold;
            // &:hover {
            //   color: #fff;
            // }
          }
        }
        .ivu-modal-header {
          height: 44px;
          background: linear-gradient(180deg, #f1faf5 0%, #e2f3e9 91%, #d7eadf 100%);
          // box-shadow: 0px 2px 3px 2px #F9FDF9;
          border-radius: 6px 6px 0px 0px;

          border: none;
          // .ivu-modal-header-inner {
          font-size: 16px;
          font-weight: 800;
          color: #66bc7a;
          letter-spacing: 7px;
          // }
          .props-title {
            display: flex;
            align-items: center;
            img {
              margin-right: 14px;
              width: 12px;
              height: 21px;
            }
          }
        }
        .ivu-modal-body {
          // .show-scroll-y;
          max-height: 500px;
          overflow: auto;
          flex: 1;
          padding: 0 30px;
        }

        .ivu-modal-footer {
          position: relative;
          &::after {
            content: '';
            position: absolute;
            top: -2px;
            left: 30px;
            width: calc(100% - 60px);
            height: 1px;
            background: rgba(244, 246, 250, 1);
            border-radius: 8px;
          }
          border: none;
          padding: 0 20px;
          height: 60px;
          // .flex;
          display: flex;
          align-items: center;
          justify-content: center;
          .ivu-btn:hover {
            background: #85c989;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
